<template>
    <div class="mains">
        <div class="login-contain">

          <div class="chess-board">
          </div>
            <div class="label">
                <el-form label-width="80px" style="margin-top:20px">
                    <el-input type="text" placeholder="请输入账号" class="input" autocomplete="new-pwd" v-model="name"></el-input>
                    <el-input type="password" placeholder="请输入密码" class="input" autocomplete="new-pwd"  v-model="password"></el-input>
                </el-form>
                <el-button class="btn" @click="login">登录</el-button>
            </div>
          <div>{{msg}}</div>
        </div>

    </div>
</template>

<script setup>
import { reactive, getCurrentInstance, watch, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {useStore} from 'vuex'
import { useRouter } from 'vue-router'
import cookies from 'js-cookie'
const instance = getCurrentInstance()
let name=ref('')
let password=ref('')
let board_status_data = [
  ["RJ1", "RM1", "RX1", "RS1", "RW", "RS2", "RX2", "RM2", "RJ2"],
  ["", "",  "",    "",    "",   "",    "",    "",    ""],
  ["",    "RP1", "",    "",    "",   "",    "",    "RP2", ""],
  ["RB1", "",    "RB2", "",    "RB3", "",   "RB4", "",    "RB5"],
  ["", "", "", "", "", "", "", "", ""],
  ["", "", "", "", "", "", "", "", ""],
  ["BB5", "", "BB4", "", "BB3", "", "BB2", "", "BB1"],
  ["", "BP2", "", "", "", "", "", "BP1", ""],
  ["", "", "", "", "", "", "", "", ""],
  ["BJ2", "BM2", "BX2", "BS2", "BW", "BS1", "BX1", "BM1", "BJ1"],
];
let board_status=ref(board_status_data)
let sel_piece = null
let sel_row = null
let sel_col = null
let player = 'B'
let msg = ref(0)

const {commit} =useStore()
const router = useRouter()

function login() {
    if (!name.value || !password.value) {
        ElMessage.error('请填写相应的信息！')
        return
    }
    let val = {
        username:name.value,
        password:password.value,
    }
    instance.proxy.$http.post('/api/v2.0/user/login ', val).then((res) => {
        let error = res.error
        if (error == 0) {
            ElMessage.success('登录成功')
            cookies.set('userid', val.username)
            sessionStorage.setItem('tokenAddFun',res.token)
            sessionStorage.setItem('userAddId',val.username)
            commit('updateName',val.username)
            router.push({
                name: 'Home',
            })
        }else{

          ElMessage.error('error:' + error)

        }
    })
}

function check_active_piece (piece, row, col) {
  // return false;
  if (piece == "")
    return false;
  if (row == sel_row && col == sel_col) {
    return true;
  } else {
    return false;
  }
}

function change_bord_status (cur_piece, move_to) {
  let piece = cur_piece[0], cur_row = cur_piece[1], cur_col = cur_piece[2];
  let move_row = move_to[1], move_col = move_to[2];
  let cur_bord_status = board_status.value;

  cur_bord_status[cur_row][cur_col] = ''
  cur_bord_status[move_row][move_col] = piece;
  board_status.value = cur_bord_status;
  // console.log('change:', this.board_status[cur_row][cur_col], cur_row, cur_col)
}

function chess_game_process(move) {

}

function cal_move(piece, cur_row, cur_col, move_row, move_col) {
  let cur_player = piece[0];

  if ('B' == cur_player) {
     return [
         piece,
         [
           9-cur_col,
           10-cur_row
         ],
         [
           9 - move_col,
           10 - move_row
         ],
     ]
  } else if ('R' == cur_player) {
    return [
      piece,
      [
        cur_col+1,
        cur_row+1
      ],
      [
        move_col+1,
        move_row+1
      ],
    ]
  }
}

function load_chess_game() {
  console.log('load_chess_game')
  instance.proxy.$http.post('/api/v2.0/load_chess_game', {
    'match_id':1,
  }).then((res)=>{
    console.log('res:', res)
    let error = res.error
    if (error == 0) {
      board_status.value = res.data.status;
      player = res.data.player;
      sel_piece = null;
      sel_row = null;
      sel_col = null;
    } else {
      ElMessage.error(res.err_msg)
    }
  })
}

function reset_chess_game() {
  console.log('reset_chess_game')
  instance.proxy.$http.post('/api/v2.0/reset_chess_game', {
    'match_id':1,
  }).then((res)=>{
    console.log('res:', res)
    let error = res.error
    if (error == 0) {
      board_status.value = res.data.status;
      player = res.data.player;
      sel_piece = null;
      sel_row = null;
      sel_col = null;
    } else {
      ElMessage.error(res.err_msg)
    }
  })
}

function rewind_chess_game() {
  console.log('rewind_chess_game')
  instance.proxy.$http.post('/api/v2.0/rewind_chess_game', {
    'match_id':1,
  }).then((res)=>{
    console.log('res:', res)
    let error = res.error
    if (error == 0) {
      board_status.value = res.data.status;
      player = res.data.player;
      sel_piece = null;
      sel_row = null;
      sel_col = null;
    } else {
      ElMessage.error(res.err_msg)
    }
  })
}


function click_piece(piece, row, col) {
// if (piece == '' && this.sel_piece[0]=='')
  //   return;
  console.log("road:", piece, row, col, player.value);
  // 当前没有选中棋子
  if (!sel_piece) {
    // 没有点击到棋子
    if (!piece) {
      return;
    }
    // 选中的不是当前玩家的棋子
    if (piece[0] != player) {
      return;
    }
    sel_piece = piece;
    sel_row = row;
    sel_col = col;
  } else {
    // 当前有选中的棋子, 移动的位置是空的或是对方的棋子， 可以移动
    if (!piece || piece[0] != sel_piece[0]) {
      console.log('change_bord_status:', [sel_piece, sel_row, sel_col], [piece, row, col] )
      let move = cal_move(sel_piece, sel_row, sel_col, row, col)
      console.log('move:', move)
      instance.proxy.$http.post('/api/v2.0/chess_game_process ', {
        'match_id':1,
        'move':move
      }).then((res)=>{
        console.log('res:', res)
        let error = res.error
        if (error == 0) {
          change_bord_status([sel_piece, sel_row, sel_col], [piece, row, col]);

          sel_piece = null;
          sel_row = null;
          sel_row = null;

          if ('B' == player) {
            player = 'R';
          } else if ('R' == player) {
            player = 'B';
          }
        } else {
          ElMessage.error(res.err_msg)
        }
      })
      // change_bord_status([sel_piece, sel_row, sel_col], [piece, row, col]);

      // sel_piece = null;
      // sel_row = null;
      // sel_row = null;
      //
      // if ('B' == player) {
      //   player = 'R';
      // } else if ('R' == player) {
      //   player = 'B';
      // }
    } else {
      sel_piece = piece;
      sel_row = row;
      sel_col = col;
    }
  }
  msg.value = new Date().getTime();
}

</script>

<style  scoped>
.mains {
    /*background-image: url('../assets/bac.jpg');*/
    /*background-repeat: no-repeat;*/
    /*background-size: cover;*/
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
}
.login-contain{
      width: 578px;
      height: 350px;
      padding: 0px;
      margin: 0 auto;
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      align-self: center;
      /* background: #FFFFFF; */
      border-radius: 8px;
  }

.bord-col {
  float:left;
  height:30px;
  width:40px;
  display: flex; /* 设置容器为flex布局 */
  align-items: center; /* 水平居中对齐项目 */
  justify-content: center; /* 垂直居中对齐项目 */
  cursor: default;
}

.active-piece {
  text-decoration-line: underline;
}

.red-piece {
  color: red;
}

  .input{
      width: 350px;
      height: 40px;
      text-align: left;
      margin-top:10px;
  }
  .btn{
      margin-top: 30px;
      width: 350px;
      height: 40px;
      background-color: rgb(0, 150, 230);
      color: #fff;
      font-size: 20px;
  }
  .panel button {
    margin-left: 20px;
  }

  .chess-board {
    height:605px;
    width: 538px;
  }

  /deep/ .el-input__inner{
      background-color: rgba(255,255,255,0) !important;
  }
  /deep/ .el-input__inner:-webkit-autofill{
      transition: background-color 5000s ease-in-out 0s;
  }
  /deep/ .el-input__inner:-webkit-autofill:focus{
      -webkit-text-fill-color: #333 !important;
  }
</style>
